<template>
  <PageContainer>
    <div class="search-list">
      <div class="left">
        <div class="item">
          <div class="label">标签</div>
          <el-select v-model="searchParams.label" multiple :multiple-limit="3" placeholder="全部标签">
            <el-option label="全部标签" value="" />
          </el-select>
        </div>
        <div class="item">
          <div class="label">课程商品</div>
          <el-input v-model="searchParams.keyword" placeholder="请输入课程名称" clearable :suffix-icon="Search" />
        </div>
        <div class="item">
          <div class="label">启用状态</div>
          <el-checkbox-group v-model="searchParams.status">
            <el-checkbox label="1">启用</el-checkbox>
            <el-checkbox label="2">禁用</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="pt-10px pb-20px">
      <RouterLink :to="{ path: '/goods/courseCreateUpdate' }">
        <el-button type="primary">添加课程商品</el-button>
      </RouterLink>
    </div>
    <div class="table-wrap">
      <el-table :data="tableData">
        <el-table-column prop="name" label="课程商品" />
        <el-table-column prop="label" label="标签" />
        <el-table-column prop="status" label="价格（元）" />
        <el-table-column prop="createTime" label="排序" />
        <el-table-column prop="createTime" label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-color="" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="操作">
          <template #default="scope">
            <el-link type="primary">推广</el-link>
            <el-link type="primary">管理</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </PageContainer>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'

defineOptions({ name: 'CourseGoods' })

const searchParams = reactive({
  label: [],
  keyword: '',
  status: [],
})
const tableData = ref([{}])
</script>

<style scoped lang="scss"></style>
